<template>
  <div id="contentRight">
    <section id="sec1">
      <p class="guide">
        <router-link to="/asset">资产总览&nbsp;&nbsp;>&nbsp;</router-link>
        <span>充值</span>
      </p>
      <div class="d1">
        <p class="p1">汇款订单</p>
        <div class="list">
          <p>
            <span class="left">收款方户名</span>
            <span class="right">{{name}}</span>
            <span class="copy" :data-clipboard-text="name" id="copy1" @click="copyInfo('#copy1')">复制</span>
          </p>
          <p>
            <span class="left">收款方卡号</span>
            <span class="right">{{receiveAccount}}</span>
            <span class="copy" :data-clipboard-text="receiveAccount" id="copy2" @click="copyInfo('#copy2')">复制</span>
          </p>
          <p>
            <span class="left">收款方开户行</span>
            <span class="right">{{bank_name}}</span>
            <span class="copy" :data-clipboard-text="bank_name" id="copy4" @click="copyInfo('#copy4')">复制</span>
          </p>
          <p>
            <span class="left">转账金额</span>
            <span class="right">{{money}} CNY</span>
          </p>
          <p>
            <span class="left">支付方式</span>
            <span class="right">{{payName}} CNY</span>
          </p>
        </div>
      </div>
      <div class="d2">
        <p class="p1">请按提示信息向商家付款</p>
        <div class="reminder">
          <p>1. 请向指定银行账户付款；</p>
          <p>2. 请用第三方网银或者银行柜台转款；</p>
          <p>3. 超过10分钟未确认，请联系客服核查；</p>
          <p>4. 周末充值到账速度较慢，若未到账，则顺延至工作日处理；</p>
        </div>
        <div class="p3">
          <button id="submit" @click="imSure">我已确认付款</button>
          <p class="p2">温馨提示：如有任何疑问请联系在线客服（请在工作日9：00~21：00之间完成充值）</p>
        </div>
      </div>
    </section>
    <danger-dialog ref="digDg" v-bind:element="dialogConfirm" confirmBtn='确认已转账' titleTxt="确认提醒" @confirm="confirmRecharge"></danger-dialog>
  </div>
</template>
<script>
  import {getPublicMes , rechargePublic} from '../http/api';
  export default {
    name: 'recharge',
    data() {
      return {
        money: '',
        receiveAccount: '',/*收款账号*/
        cardName: '',//转款卡主姓名
        order_id : '',//订单id
        name : '',//收款方
        bank_name : '',//开户行
        payName : '',//支付方式
        channel : null,
        dialogConfirm:'<p style="color: #666;font-size: 16px;text-align: center;line-height: 170%;padding: 0 43px">如您在未支付的情况下点击 “确认已转账” ，有可能导致您的帐户被冻结</p>',
      }
    },
    components:{
      DangerDialog: resolve => { require(['../components/DangerDialog'], resolve) },/*确认弹窗*/
    },
    mounted() {
      let thiz =this;
      let query = this.$route.query;
      let Right = query.num && query.channel;
      if(!Right){
        this.$router.go(-1);
        return;
      }
      this.channel = query.channel;
      this.money = Number(query.num);
      this.payName = query.channel === 'BANK_TRANSFER' ? '对公转账' : '支付宝对公转账';
      getPublicMes({ amount : thiz.money } ).then( res => {
        if( res.code == 200 ){
          let data = res.data.data;
          let card_info = data.card_info;
          thiz.name = card_info.name;
          thiz.receiveAccount = card_info.card_num;
          thiz.bank_name = card_info.bank_name;
          thiz.order_id = data.order_id;
        }
      })
    },
    methods:{
      copyInfo(id) {
        require('../common/js/copy').copy({id: id , toast: '复制成功'});
      },
      imSure(){
        let thiz = this;
        this.$refs.digDg.changeToast(thiz.dialogConfirm);
        this.$refs.digDg.dialogShow();
      },
      confirmRecharge(){
        let param = {
          order_id : this.order_id,  card_owner_name : this.cardName, uid : this.$store.state.uid,  amount : this.money,channel : this.channel
        };
        // this.$router.replace({path:'/rechargeResult' , query : param });
        // return
        rechargePublic(param).then( res => {
          if( res.code == 200 ){
            require('../common/js/toast').toast('转账成功');
            this.$router.replace({path:'/rechargeResult' , query : param });
          }
        });
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #sec1{
    padding-bottom: 70px;
    >.d1{
      width: calc( 100% - 46px );margin: 0 auto;background: #F8F8F8;margin-top: 54px;.borderRadius;overflow: hidden;
      >.p1{
        text-align: center;color: #262626;font-size: 18px;padding-top: 23px;
      }
      >.list{
        padding: 20px 49px;padding-bottom: 41px;
        >p{
          padding-top: 20px;
          >span{
            display: inline-block;font-size: 14px;
            &:first-child{
              width: 146px;
            }
          }
          &:first-child{
            padding-top: 0;
          }
          .copy{
            float: right;.colorYellow;font-size: 14px;
            &:hover{
              cursor: pointer;
            }
          }
        }
      }
    }
    >.d2{
      width: calc( 100% - 46px );margin: 0 auto;
      >.p1{
        .colorYellow;font-size: 18px;padding-top: 41px;
      }
      >.reminder{
        color: #999999;font-size: 14px;line-height: 150%;padding-top: 5px;
        >p{
          padding-top: 10px;
        }
      }
      >.p3{
        text-align: center;margin:0 auto;padding-top: 75px;
        >#submit{
          .submit;width: 180px;height: 38px;line-height: 38px;font-size: 16px;
        }
        >.p2{
          text-align: center;color: #999999;font-size: 14px;padding-top: 33px;
        }
      }
    }
  }
</style>
